@import 'init.scss';
@import 'constants.scss';

// 分别定义元素
// 导航条大盒子样式
.header {
  // 宽高 背景颜色
  width: 100%;
  height: $navHeight;
  background: #3a3a3a;

  // 导航条绝对定位
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  z-index: 100;

  // 导航条透明度
  //opacity:0.5;

  // 导航条内嵌套 div盒子
  .container {
    // 宽 高：和导航条盒子一样 位置 剧中
    width: $pageWidth;
    height: 100%;
    // 测试用
    //background: yellowgreen;
    margin: 0 auto;
    //overflow: hidden;

    // 导航条logo
    .logo-box {
      // 宽高背景照片定义
      // 宽高量一下尺寸
      width: 140px;
      height: 49px;
      // no-repeat 一般与background-image 一起使用；此时背景不平铺
      background: url('https://www.xfz.cn/static/build/images/logo.png') no-repeat;
      // 此时 会造成margin-top塌陷 需要在父元素 overflow: hidden;
      margin-top: 8px;
      // float 浮动起来 使div元素不要占用一行
      float: left;
      a {
        display: block;
        // 设置背景图片100%撑开
        width: 100%;
        height: 100%;
      }
    }
    .nav {
      // 距左边距
      margin-left: 128px;
      // 浮动起来 使div不要占用一行
      float: left;
      li {
        float: left;
        // 距右边距
        margin-right: 40px;
        // 字体无法设置行间距
        line-height: $navHeight;
        // 设置完行间距后 要设置高度才能撑开
        height: $navHeight;
        // border-box; 代表出现在盒子里面
        box-sizing: border-box;
        a {
          // a标签字体颜色只能在a标签设置
          color: #fff;
        }
        // &.active 父元素li下添加一个class="active"属性
        &.active {
          // 指定底部 边框 此时会被父元素overflow: hidden; 隐藏掉
          // 解决办法 在li元素下 添加box-sizing: border-box; 代表出现在盒子里面
          border-bottom: 5px solid $themeColor;
        }
      }
    }
    .auth-box {
      float: right;
      line-height: $navHeight;
      height: $navHeight;
      color: #fff;
      position: relative;

      .iconfont {
        color: #fff;
        font-size: 20px;
      }

      a {
        color: #fff;
      }

      .user-more-box {
        background: #fff;
        width: 140px;
        //height: 90px;
        position: absolute;
        box-shadow: 0 3px 4px #cccccc;
        border-radius: 5px;
        top: 65px;
        left: 50%;
        margin-left: -70px;
        font-size: 14px;
        z-index: 2;
        display: none;

        .triangle {
          border: solid transparent;
          border-width: 10px;
          border-bottom-color: #ffffff;
          display: block;
          width: 0;
          height: 0;
          margin-top: -20px;
          margin-left: 60px;
        }

        a {
          text-align: center;
          height: 44px;
          color: #6d85ac !important;
          display: block;
          line-height: 44px;
        }
      }
    }
  }
}
